<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
      <el-breadcrumb-item>博客管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="30">
        <el-col :span="7">
          <el-input placeholder="请输入内容" v-model="blog">
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-table :data="bloglist" stripe>
        <el-table-column type="index" width="35"></el-table-column>
        <el-table-column label="文章标题" prop="title" width="200"></el-table-column>
        <el-table-column label="创作日期" prop="create_time" width="150"></el-table-column>
        <el-table-column label="文章分类" prop="type" width="110"></el-table-column>
        <el-table-column label="文章标签" width="230">
          <template v-slot:default="scope">
            <div class="tag_row">
              <el-row v-for="(item,key) in scope.row.tags" :key="key" style="margin-right: 3px">
                <el-tag :type="tagType[key%5]">{{item}}</el-tag>
              </el-row>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否发布" width="100">
          <template v-slot:default="scope">
            <span>{{scope.row.published === 'true' ? '已发布' : '草稿'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="发布/撤销" width="100">
          <template v-slot:default="scope">
            <el-switch :value="scope.row.published === 'true' ? true : false" @change="tagStateChange(scope.row.id,scope.row.published === 'true' ? true : false)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot:default="scope">
            <el-button @click="View(scope.row.id)" size="small">查看</el-button>
            <el-button type="success" @click="Update(scope.row.id)" size="small">编辑</el-button>
            <el-button @click="Delete(scope.row.id)" type="primary" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-size="size"
        layout="total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
export default {
  data () {
    return {
      bloglist: [],
      current: 0,
      size: 1,
      total: 1,
      tagType: ['', 'success', 'info', 'warning', 'danger'],
      blog: '',
      id: ''
    }
  },
  created () {
    this.getSomesBlog()
  },
  methods: {
    handleCurrentChange (currentPage) {
      var token = sessionStorage.getItem('token')
      this.$axios.defaults.headers.Authorization = 'Bearer ' + token
      this.$axios.get('/blog/getSomeBlogs', {
        params: {
          current: currentPage,
          size: 20,
          // username: window.sessionStorage.getItem('username')
        }
      }).then(response => {
        // console.log(response.data)
        this.$set(this, 'bloglist', response.data.data)
        this.convertBlog(this.bloglist)
        if (response.data.data !== null) {
          this.total = parseInt(response.data.data[0].total)
          this.size = parseInt(response.data.data[0].size)
          this.current = parseInt(response.data.data[0].current)
        } else {
          this.total = 0
          this.size = 0
          this.current = 0
        }
      }).catch(error => {
        console.log(error)
      })
    },
    addDialogClosed () {
      this.$refs.blogFormRef.resetFields()
    },
    editDialogClosed () {
      this.$refs.editblogFormRef.resetFields()
    },
    View (id) {
      // window.open('https://www.wygandwdn.cn/article/' + id, '_blank')
    },
    Delete (bid) {
      // var token = sessionStorage.getItem('token')
      // this.$axios.defaults.headers.Authorization = 'Bearer ' + token
      this.$axios.post('/blog/deleteBlog', {
        id: bid
      }).then(response => {
        if (response.data.status === 200) this.$message.success('删除成功!')
        else this.$message.error('删除失败!')
      }).catch(error => {
        console.log(error)
      })
    },
    Update (id) {
      this.$router.push({ path: `/edit/${id}` })
    },
    tagStateChange (id, published) {
      var token = sessionStorage.getItem('token')
      this.$axios.defaults.headers.Authorization = 'Bearer ' + token
      this.$axios.get('/blog/changeBlogState', {
        params: {
          bid: id,
          state: !published
        }
      }).then(response => {
        // console.log(response.data)
        if (response.data.data === 1) {
          this.$message.success('修改成功!')
          this.getSomesBlog()
        } else this.$message.error('修改失败!')
      }).catch(error => {
        console.log(error)
      })
    },
    convertBlog (blogList) {
      var i = 0
      for (; i < blogList.length; i++) {
        blogList[i].tags = blogList[i].tags.replace('[', '')
        blogList[i].tags = blogList[i].tags.replace(']', '')
        var d = new Date(blogList[i].create_time)
        blogList[i].create_time = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() +
             ':' + d.getMinutes() + ':' + d.getSeconds()
        blogList[i].tags = blogList[i].tags.split(',')
      }
    },
    getSomesBlog () {
      var token = sessionStorage.getItem('token')
      this.$axios.defaults.headers.Authorization = 'Bearer ' + token
      this.$axios.get('/blog/getSomeBlogs', {
        params: {
          current: 1,
          size: 20,
          // username: window.sessionStorage.getItem('username')
        }
      }).then(response => {
        // console.log(response.data)
        this.$set(this, 'bloglist', response.data.data)
        this.convertBlog(this.bloglist)
        if (response.data.data !== null) {
          this.total = parseInt(response.data.data[0].total)
          this.size = parseInt(response.data.data[0].size)
          this.current = parseInt(response.data.data[0].current)
        } else {
          this.total = 0
          this.size = 0
          this.current = 0
        }
      }).catch(error => {
        console.log(error)
      })
    },
    search () {
      if (this.blog !== '') {
        var token = sessionStorage.getItem('token')
        this.$axios.defaults.headers.Authorization = 'Bearer ' + token
        this.$axios.get('/blog/fuzzy', {
          params: {
            blog: this.blog,
            // username: window.sessionStorage.getItem('username')
          }
        }).then(response => {
          this.$set(this, 'bloglist', response.data.data)
          this.convertBlog(this.bloglist)
          if (response.data.data !== null) {
            this.total = parseInt(response.data.data[0].total)
            this.size = parseInt(response.data.data[0].size)
            this.current = parseInt(response.data.data[0].current)
          } else {
            this.total = 0
            this.size = 0
            this.current = 0
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.tag_row{
  display: flex;
}
</style>
